<template>
	<app-page>
		<wd-config-provider :theme="theme">
			<view class="container">
				<view class="body" v-for="(item, index) in datas">
					<view class="date">{{ item.date }}</view>
					<view class="item" v-for="(item1, index1) in item.data"
						@click="goPage('/tools/tips/info',{id:item1.id})">
						<view class="box">
							<view class="title">
								<view class="text text-ellipsis">{{ item1.title }}</view>
							</view>
							<view class="desc text-ellipsis2">
								时间：{{ item1.time }}
							</view>
						</view>
						<view class="icon">

							<!-- <text class="iconfont icon-wujiaoxing1"></text> -->
						</view>
					</view>
				</view>
				<view class="btn">
					<wd-button @click="goPage('/tools/tips/add')"
						custom-class="wd-button-custom-class-my-success square wd-button-custom-class-w100">
						<text class="iconfont icon-jiahao"></text>
						添加提醒
					</wd-button>
				</view>
			</view>
		</wd-config-provider>
	</app-page>

</template>

<script lang="ts">
	import { ref, defineComponent, computed } from 'vue';
	import { getTipsList } from "@/api/index"
	import { onShow } from "@dcloudio/uni-app"
	import useRouter from '@/hooks/useRouter.ts';

	import useDataLoad from '@/hooks/useDataLoad.ts';
	export default defineComponent({
		name: 'CaseComponent',
		props: {
			// 定义props
		},
		setup(props, { attrs, slots, emit }) {
			const dataList = [
				{
					date: '今天',
					data: [
						{
							desc: '明天8点  地址：公司'
						},
						{
							desc: '明天10点 地址：街角的咖啡厅'
						}
					]
				},
				{
					date: '昨天',
					data: [
						{
							desc: '明天14点 地址：街心公园'
						},
						{
							desc: '明天下午16点 地址：海洋公园'
						}
					]
				},
				{
					date: '昨天',
					data: [
						{
							desc: '明天14点 地址：街心公园'
						},
						{
							desc: '明天下午16点 地址：海洋公园'
						}
					]
				},
				{
					date: '昨天',
					data: [
						{
							desc: '明天14点 地址：街心公园'
						},
						{
							desc: '明天下午16点 地址：海洋公园'
						}
					]
				},
				{
					date: '昨天',
					data: [
						{
							desc: '明天14点 地址：街心公园'
						},
						{
							desc: '明天下午16点 地址：海洋公园'
						}
					]
				},
				{
					date: '昨天',
					data: [
						{
							desc: '明天14点 地址：街心公园'
						},
						{
							desc: '明天下午16点 地址：海洋公园'
						}
					]
				},
				{
					date: '昨天',
					data: [
						{
							desc: '明天14点 地址：街心公园'
						},
						{
							desc: '明天下午16点 地址：海洋公园'
						}
					]
				},
				{
					date: '昨天',
					data: [
						{
							desc: '明天14点 地址：街心公园'
						},
						{
							desc: '明天下午16点 地址：海洋公园'
						}
					]
				},
				{
					date: '昨天',
					data: [
						{
							desc: '明天14点 地址：街心公园'
						},
						{
							desc: '明天下午16点 地址：海洋公园'
						}
					]
				},
				{
					date: '昨天',
					data: [
						{
							desc: '明天14点 地址：街心公园'
						},
						{
							desc: '明天下午16点 地址：海洋公园'
						}
					]
				},
				{
					date: '昨天',
					data: [
						{
							desc: '明天14点 地址：街心公园'
						},
						{
							desc: '明天下午16点 地址：海洋公园'
						}
					]
				},
				{
					date: '昨天',
					data: [
						{
							desc: '明天14点 地址：街心公园'
						},
						{
							desc: '明天下午16点 地址：海洋公园'
						}
					]
				},
				{
					date: '昨天',
					data: [
						{
							desc: '明天14点 地址：街心公园'
						},
						{
							desc: '明天下午16点 地址：海洋公园'
						}
					]
				}
			];
			const router = useRouter();
			const dataLoad = useDataLoad(getTipsList);
			const goPage = (url : string, params : any) => {
				router.push({
					url,
					params,
				});
			};
			onShow(() => {
				dataLoad.reGetData();
				console.log(datas)
			})
			const datas = computed(() => {
				let dataList = dataLoad.dataList.value || []; // 获取数据列表或使用默认数据列表
				let keys = dataList.map((item : { date : any; }) => item.date);
				keys = Array.from(new Set(keys))
				let list = [];
				for (let i = 0; i < keys.length; i++) {
					let key = keys[i];
					let arr = dataList.filter((item : { date : any; }) => item.date === key).flat(1); // 获取所有日期相同的item，并扁平化数组
					list.push({ date: key, data: arr }) // 将日期和对应的item放入list中
				}
				return list
			})
			return {
				dataList,
				goPage,
				datas,
				...dataLoad,
			};
		}
	});
</script>
<!-- #ifdef MP-WEIXIN -->
<style lang="less">
	page {
		background-color: #f2f2f2;
	}
</style>
<!-- #endif -->
<style lang="less" scoped>
	page {
		background-color: #f2f2f2;
	}

	.container {
		// 样式定义
		padding: 0 20rpx 160rpx; // 内边距
		width: calc(100% - 20rpx - 20rpx);

		.btn {
			position: fixed;
			width: calc(100% - 20rpx - 20rpx);

			left: 20rpx;
			bottom: 50rpx;

			.square {
				height: 100rpx !important;
			}
		}

		.body {
			.date {
				font-family: PingFang-SC-Bold;
				font-weight: 510;
				font-size: 30rpx; // 设置日期字体大小，使其与box中的文字对齐
				padding-top: 30rpx;
				padding-bottom: 30rpx; // 设置日期与item之间的间距
				color: #000000; // 设置日期字体颜色，使其与box中的文字颜色一致
			}

			.item {
				padding: 23rpx 23rpx;
				background: #ffffff;
				border-radius: 7rpx;
				margin-bottom: 20rpx; // 设置item之间的间距

				display: flex; // 设置flex布局，使icon和box在同一行显示
				align-items: center; // 使icon和box垂直居中
				justify-content: space-between; // 使icon和box水平分布，icon在box的右侧

				.box {
					width: 90%;
				}

				.icon {
					.iconfont {
						font-size: 44rpx; // 设置icon的字体大小，使其与box中的文字对齐
						color: rgb(255, 212, 0); // 设置icon的颜色，使其与box中的文字颜色一致
					}
				}

				.title {
					font-family: PingFang;
					font-weight: 320;

					color: #000000;
					display: flex; // 设置flex布局，使checkbox和文字在同一行显示
					align-items: center; // 使checkbox和文字垂直居中

					.checkbox {
						// 设置checkbox的样式，使其与文字对齐
						margin-right: 10rpx; // 设置checkbox与文字之间的间距
					}

					.text {
						font-size: 28rpx;
						// 设置文字的样式，使其与checkbox对齐
					}
				}

				.desc {
					margin-top: 14rpx;
					font-family: PingFang;
					font-weight: 400;
					font-size: 25rpx;
					line-height: 36rpx;
					color: #999999;
				}
			}

			.item:nth-child(even) {
				// background: #f2f2f2;
			}
		}
	}
</style>